
<template>
  <div class="print-documents vehicle">
    <div class="car-info">
      <div v-for="(items,index) in orderList" :key="items.id">
        <div class="clearfix top">
          <img class="fl" src="@/assets/img/icon/car.png" />
          <div class="fl center">
            <p>
              <span>客户姓名：</span>
              <span>{{items.username}}</span>
            </p>
            <p>
              <span>号牌号码：</span>
              <span>{{items.carNum}}</span>
            </p>
          </div>
          <div class="fr">
            <p class="print" @click="printClick(items,index)">{{stateFn(items)}}</p>
          </div>
        </div>
        <div class="bottom clearfix">
          <div class="fl">
            <p>车辆类型</p>
            <p>{{items.carType}}</p>
          </div>
          <span class="fl"></span>
          <div class="fl">
            <p>燃油类型</p>
            <p>{{items.carFuel}}</p>
          </div>
          <span class="fl"></span>
          <div class="fl">
            <p>年检到期</p>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLocal } from '@/utils/storage'
export default {
  data() {
    return {
      carUser: JSON.parse(getLocal('userInfo')),
      orderList: [],
      orderState: []
    }
  },
  mounted() {
    this.dataDir('carOrderStatus')
    this.queryOrder()
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 车检数据查询
    async queryOrder() {
      let params = {
        userId: this.carUser.id
      }
      let { data } = await this.$api.queryOrder(params)

      if (data && data.list.length !== 0) {
        this.orderList = data.list
      } else {
      }

      console.log(data, '------------------- 车检数据查询 ----------------')
    },
    // 获取车辆数据字典
    async dataDir(e) {
      let res = await this.$api.dataDir({
        type: e
      })
      console.log(res, '------------------- 获取车辆数据字典 ----------------')

      if (res.status === 200 && res.data) {
        console.log(JSON.stringify(res.data.list))
        this.orderState = res.data.list
      }
    },
    printClick(els, index) {
      console.log(els.status)
      if (els.status === 40) {
        this.$toast('您已经打印过咯！')
        return
      }
      if (els.status <= 20) {
        this.$toast('您还没有支付！')
      }
      if (els.status >= 25 && els.status <= 35) {
        this.$router.push({
          name: 'printDetails',
          params: {
            carInfo: els
          }
        })
      }
    },
    // 工具
    stateFn(row) {
      // 单据打印完成
      if (row.status >= 25 && row.status <= 35) {
        return '打印单据'
      }

      // 还没支付
      if (row.status <= 20) {
        return '点击缴费'
      }

      // 订单完成
      if (row.status >= 60) {
        return '点击评价'
      }
      // return row.status
    }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.print-documents {
  margin-bottom: 0.133rem;

  .car-info .top .fr p.print {
    width: 2.373rem;
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 0.4rem;
    font-size: 0.373rem;
    margin-top: 0.2rem;
  }
}
</style>